<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 导入方式 */
        @import url('./外部样式.css');
        /* 用于css引入css文件，起到样式合并的效果，但因为要等到页面下载完成后再加载，所以会影响加载速度 */

        /* 内部样式 */
        .inner p{
            color: crimson;
            font-size: 20px;
        }
        /* 单个页面内具有统一性，多个页面间容易混乱 */
    </style>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="./外部样式.css">
    <!-- 可以维持多个文件的统一，并且实现了html和css的分离 -->
</head>

<body>
    <!-- 行内样式（内联样式） -->
    <p style="color: crimson; font-size: 20px;">这是一个文本标签</p>
    <p>这是一个文本标签</p>
    <!-- 不具有可复用性，维护成本高 -->
    <div class="inner">
        <p>这是一个文本标签</p>
        <p>这是一个文本标签</p>
    </div>

    <div class="outer">
        <p>这是一个文本标签</p>
        <p>这是一个文本标签</p>
    </div>

</body>

</html>